<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二页</title>
    <link rel="stylesheet" href="./one/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        #box {
            width: 100%;
            height: 100%;
            background-image: url('./images/twobg.png');
            background-size: 100vw 100vh;
            position: relative;
            /* z-index: 1000; */
        }

        .left {
            position: absolute;
            width: 511px;
            height: 513px;
            left: -18px;
            background-image: url('./images/left.png');
            background-size: 511px 513px;
            z-index: 1000;
            top: 11px;
        }

        .right {
            width: 493px;
            height: 561px;
            position: absolute;
            background-image: url('./images/right.png');
            top: -57px;
            right: -100px;
            background-size: 100% 100%;
            z-index: 1000;
        }

        .content {
            width: 1036px;
            height: 652px;
            position: absolute;
            background-image: url('./images/con1.png');
            top: 146px;
            right: 248px;
            background-size: 100% 100%;
            z-index: 10;
        }

        .yuan {
            width: 744px;
            height: 673px;
            position: absolute;
            background-image: url('./images/yuan.png');
            top: -107px;
            right: 322px;
            background-size: 100% 100%;
            z-index: 10;
        }
    </style>
</head>

<body>
    <nav role="navigation" class="nav">
        <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="./第一页.html">
                    <li>主页</li>
                </a>
                <a href="./第二页.html">
                    <li>发现</li>
                </a>
                <a href="./第三页.html">
                    <li>简介</li>
                </a>
                <a href="./第四页.html">
                    <li>壁画</li>
                </a>
                <a href="./第六页.html">
                    <li>经书</li>
                </a>
            </ul>
        </div>
    </nav>
    <div id="box">
        <div class="left"></div>
        <div class="content"></div>
        <div class="right"></div>
        <div class="yuan"></div>
    </div>
</body>
<script src="./one/index.js"></script>
<script>
    const $box = $('#box'),
        $content = $('.content');
    let X = 0, index = 0;
    const W = window.innerWidth / 2;
    const arr = ['con1', 'con2', 'con3'];
    $content.onclick = function (event) {
        X = event.x;
        if (X > W) {
            index += 1;
            if (index >= arr.length - 1) index = arr.length - 1
        } else if (X < W) {
            index -= 1;
            if (index <= 0) index = 0
        }
        $content.style.backgroundImage = `url('./images/${arr[index]}.png')`;
        if (index === arr.length - 1) {
            index = 0;
            const data = new Stefocuse('#box', '第二页');
        }

    }


</script>

</html>